<template>
  <div>
    <div class="kylin-form modal">
      <el-row>
        <el-col :span="24">
          <span class="select_all">{{ $t("user.is_select_all") }}</span>
          <el-checkbox v-model="checked" @change="handleChange">{{
            this.$t("user.select_all")
          }}</el-checkbox>
          <el-input class="filter" placeholder="输入关键字进行过滤" v-model="filterText" />
        </el-col>
      </el-row>
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        ref="tree"
        :default-checked-keys="ids"
        :props="defaultProps"
        :filter-node-method="filterNode"
      >
      </el-tree>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">{{ $t("cancel") }}</el-button>
      <el-button class="kylin-button" @click="handleOk">{{
        $t("confirm")
      }}</el-button>
    </div>
  </div>
</template>

<script>
import {
  getAllOperationPermissions,
  setOperation,
  getOperation,
} from "@/api/role";
export default {
  props: {
    rowId: {
      type: Number || String,
      default: "",
    },
  },
  data() {
    return {
      checked: false,
      filterText: "",
      data: [],
      ids: [],
      allIds: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  mounted() {
    getAllOperationPermissions().then((res) => {
      let data = res.data.data;
      let obj = {};
      data.forEach((item) => {
        this.allIds.push(item.id);
        let module = obj[item.moudle]
          ? obj[item.moudle]
          : (obj[item.moudle] = {});
        let page = module[item.page]
          ? module[item.page]
          : (module[item.page] = []);
        page.push({
          id: item.id,
          label: item.description,
          page: this.$t(item.page),
          module: item.moudle
        });
      });
      this.data = [
        {
          id: "system_module",
          label: "系统模块",
          page: "",
          module: "",
          children: [
            {
              id: "system.systems",
              label: this.$t("system.systems"),
              page: "",
              module: "系统模块",
              children: obj["系统模块"]["system.systems"],
            },
            {
              id: "system.host_batch",
              label: this.$t("system.host_batch"),
              page: "",
              module: "系统模块",
              children: obj["系统模块"]["system.host_batch"],
            },
            {
              id: "system.scan_setting",
              label: this.$t("system.scan_setting"),
              page: "",
              module: "系统模块",
              children: obj["系统模块"]["system.scan_setting"],
            },
            {
              id: "system.system_compare",
              label: this.$t("system.system_compare"),
              page: "",
              module: "系统模块",
              children: obj["系统模块"]["system.system_compare"],
            },
            {
              id: "system.script",
              label: this.$t("system.script"),
              page: "",
              module: "系统模块",
              children: obj["系统模块"]["system.script"],
            },
          ],
        },
        {
          id: "configure_module",
          label: "配置模块",
          page: "",
          module: "",
          children: [
            {
              id: "configure.normal_library",
              label: this.$t("configure.normal_library"),
              page: "",
              module: "配置模块",
              children: obj["配置模块"]["configure.normal_library"],
            },
            {
              id: "configure.configure_item_manager",
              label: this.$t("configure.configure_item_manager"),
              page: "",
              module: "配置模块",
              children: obj["配置模块"]["configure.configure_item_manager"],
            },
            {
              id: "configure.migrate_compare",
              label: this.$t("configure.migrate_compare"),
              page: "",
              module: "配置模块",
              children: obj["配置模块"]["configure.migrate_compare"],
            },
            {
              id: "configure.template_library",
              label: this.$t("configure.template_library"),
              page: "",
              module: "配置模块",
              children: obj["配置模块"]["configure.template_library"],
            },
          ],
        },
        {
          id: "patch_module",
          label: "补丁模块",
          page: "",
          module: "",
          children: [
            {
              id: "patch.product",
              label: this.$t("patch.product"),
              page: "",
              module: "补丁模块",
              children: obj["补丁模块"]["patch.product"],
            },
            {
              id: "patch.packages",
              label: this.$t("patch.packages"),
              page: "",
              module: "补丁模块",
              children: obj["补丁模块"]["patch.packages"],
            },
            {
              id: "patch.sp_upgrade",
              label: this.$t("patch.sp_upgrade"),
              page: "",
              module: "补丁模块",
              children: obj["补丁模块"]["patch.sp_upgrade"],
            },
          ],
        },
        {
          id: "user_module",
          label: "用户模块",
          page: "",
          module: "",
          children: [
            {
              id: "user.user_manager",
              label: this.$t("user.user_manager"),
              page: "",
              module: "用户模块",
              children: obj["用户模块"]["user.user_manager"],
            },
            {
              id: "user.role_manager",
              label: this.$t("user.role_manager"),
              page: "",
              module: "用户模块",
              children: obj["用户模块"]["user.role_manager"],
            },
            /* {
                      id: "patch.sp_upgrade",
                      label: this.$t("patch.sp_upgrade"),
                      children: obj["用户模块"]["patch.sp_upgrade"]
                  } */
          ],
        },
        {
          id: "log_module",
          label: "日志模块",
          page: "",
          module: "",
          children: [
            {
              id: "log.dashboard",
              page: "日志模块",
              module: "",
              label: this.$t("log.dashboard"),
              children: obj["日志模块"]["log.dashboard"],
            },
          ],
        },
      ];
      getOperation({ ids: [this.rowId] }).then((res) => {
        let data = res.data.data;
        let arr = [];
        data.forEach((item) => {
          arr.push(item.id);
        });
        this.$refs.tree.setCheckedKeys(arr);
      });
    });
  },

  methods: {
    handleCancel() {
      this.$emit("click");
    },
    handleOk() {
      let data = this.$refs.tree.getCheckedKeys();
      let ids = data.filter((item) => typeof item === "number");
      setOperation(this.rowId, ids).then((res) => {
        if (res.data.code === "0") {
          this.$message({
            type: "success",
            message: res.data.message,
          });
          this.$emit("click");
        } else {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        }
      });
    },
    handleChange(value) {
      if (value) {
        this.$refs.tree.setCheckedKeys([...this.allIds]);
      } else {
        this.$refs.tree.setCheckedKeys([]);
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1 || data.page.indexOf(value) !== -1 || data.module.indexOf(value) !== -1;
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
};
</script>

<style lang="scss" scoped>
.select_all {
  margin-right: 20px;
  margin-left: 6px;
}
.modal {
  max-height: 600px;
  overflow: auto;
}
.filter {
    width: 50%;
}
</style>